<template>
    <div class='person-center'>
        <div class='person-center-top'>
            <div class='person-info-wrap'>
                <img class='person-photo' src="~@/assets/img/default_head.png" alt="">
                <div class='person-info'>
                    {{doctorDate.name}}
                    <div class='color-light'>主任医师:&nbsp;&nbsp;{{doctorDate.dep}}</div>
                </div>
            </div>
        </div>
        <div class="person-center-middle">
            <div class="person-center-remark">
                <span>擅长：{{doctorDate.remark}}</span>
            </div>
        </div>
        <div class="person-center-mi">排班信息</div>
        <div>其它号源</div>
        <div class="person-center-bottom" v-for="d in datas" :key="d.data">
            <span>{{d.data}}</span>
            <el-button @click="yuyue(d.data)" type="primary" style="margin-left: 200px;">预约</el-button>
            <el-drawer
                    title="我是标题"
                    :visible.sync="drawer"
                    direction="btt"
                    size="50%"
                    :with-header="false">
                <span>请选择时间段</span>
                <div class="person-center-bottom-two" v-for="data in datas" :key="data.data" @click="yuyue2()">
                    <span>{{data.data}}</span>
                </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Appointment',

        data(){
            return{
                phone:'000',
                doctor:'1',
                doctorDate:{dep:'中医儿科',name:'李三',remark:'擅长难产及产后危重症处理擅长难产及产后危重症处理擅长难产及产后危重症处理'},
                datas:[
                    {data:'2024-2-26'},
                    {data:'2024-2-27'},
                    {data:'2024-2-28'},
                    {data:'2024-2-29'}
                ],
                drawer:false,
            }
        },
        mounted(){
            this.doctor = this.$route.params.doctor;
            console.log(this.doctor)
        },


        methods:{
            yuyue(d){
                this.drawer = true;
                console.log(d);
                console.log(this.doctor.name);
            },
            yuyue2(){
                this.drawer = false;
            }
        }

    }
</script>


<style scoped>
    .person-center {
        background: #f2f2f2;
        /* padding-bottom: 30px; */
    }
    .person-center .person-center-top {
        position: relative;
        height: 100px;
        width: 100%;
        background: #2ca7f4;
    }
    .person-center .person-center-top .person-info-wrap {
        position: absolute;
        display: flex;
        align-items: center;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
    .person-center .person-center-top .person-info-wrap .person-photo {
        width: 40px;
        margin-right: 15px;
    }
    .person-center .person-center-top .person-info-wrap .person-info {
        color:#fff;
        font-size: 24px;
    }
    .person-center .person-center-top .person-info-wrap .person-info .color-light {
        color:rgba(255, 255, 255,.6);
        font-size: 14px;
    }
    .person-center .person-center-middle{
        margin-top: 1px;
        position: relative;
        height: 60px;
        width: 100%;
        background: #2ca7f4;
    }
    .person-center .person-center-middle .person-center-remark{
        color: #ffffff;
        font-size: 14px;
    }
    .person-center .person-center-mi{
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        background: #ffffff;
    }
    .person-center .person-center-bottom{
        display: flex;
        background: #ffffff;
        width: 100%;
        height: 60px;
    }
    .person-center .person-center-bottom .person-center-bottom-two{
        width: 100%;
        height: 40px;
    }

</style>
